//开始点击按钮
var start = document.querySelector(".start");
var load = document.querySelector(".load");
var game = document.querySelector(".game");
var bam = game.querySelector(".bam");
var per = game.querySelector(".per");
var gam1 = document.querySelector(".game1");
var p = document.querySelector(".p");
var cai = gam1.querySelector(".cai");
var ranking = document.querySelector(".ranking");
p.addEventListener("click", function() {
	gam1.style.transform = "scale(1)";
});
cai.addEventListener("click", function() {
	gam1.style.transform = "scale(0)"
});
start.addEventListener("click", function() {
	load.style.display = "block";
	//加载页面跳转开始页面
	var ko_right = document.querySelector(".ko_right");
	var xhr = new XMLHttpRequest;
	xhr.open("GET", "js/index.json");
	xhr.send();
	xhr.addEventListener("readystatechange", function() {
		if(xhr.readyState == 4) {
			if(xhr.status == 200) {
				var res = JSON.parse(xhr.responseText);
				var loading = new createjs.LoadQueue();
				loading.loadManifest(res);
				loading.on("progress", function(event) {
					var num = Math.floor(event.progress * 100);
					ko_right.innerHTML = num + "%";
					if(num > 99) {
						load.style.display = "none";
						game.style.display = "block"
					}
				})
			}
		}
	})
	//开始游戏
	var h1 = document.querySelector(".h1");
	h1.addEventListener("click", function() {
		var arr = ["GO"];
		var i = 3;
		var time = setInterval(function() {
			h1.innerHTML = i;
			i--;
			if(i < 0) {
				h1.innerHTML = arr;
			}
			if(i < -1) {
				h1.style.display = "none"
				clearInterval(time);
				var timer = document.querySelector(".timer");
				var j = 1;
				var time1 = setInterval(function() {
					timer.innerHTML = j.toFixed(2);
					j++;
				}, 1000)
				var num = 655;
				var bun = 834;
				game.addEventListener("touchstart", function() {
					per.style.backgroundPositionX = "-" + num + "px";
					num += 1060;
					if(num > 8075) {
						num = 655;
					}
					bam.style.transform = "translateY(-" + bun + "px)";
					bun -= 10;
					var ann = "完成";
					if(bun < 0) {
						clearInterval(time1);
						ranking.style.display = "block";
						game.style.display = "none";
					}
				})
			}
		}, 800)
	})
})
//排行榜

function getn(nam,grad,headIm){
	var xhr = new XMLHttpRequest();
	var beaUrl = "https://easy-mock.com/mock/5b712abe3ec6e13ce517da93/Ranking/rankingList?";
	var myUrl = beaUrl+"name="+nam+"&grade="+grad+"&headImg="+headIm;
	xhr.open("GET",myUrl);
	xhr.send();
	xhr.addEventListener("readystatechange", function() {
		if(xhr.readyState == 4) {
			if(xhr.status == 200) {
				var res = JSON.parse(xhr.responseText);
				arr1(res);
			};
		};
	});
	var Rank = document.querySelector(".Rank");
	var tim = document.querySelector(".tim");
	var ming = document.querySelector(".ming");

	function arr1(res) {
		var num = 0;
		for(var i = 0; i < res.data.result.length; i++) {
			res.data.result.sort(function(a,b){
				return a.grade - b.grade;
			})
			
			for(var j = 0; j < res.data.result.length; j++) {
				if(num < res.data.result.length) {
					num++;
					break;
				}
			}
			var div = "<div class='two'><div class='two_left'>" + num + "</div><div class='two_right'><div class='amy'><img src=" + res.data.result[i].headImg + "/></div><div class='two_right_center'><p>Time</p><span>" + res.data.result[i].name + "</span><span>" + res.data.result[i].grade + "</span></div></div></div>";
			Rank.innerHTML += div;
			if(num == 1) {
				var div2 = "<p class='qu'>全国排名</p><span class='ci'>" + num + "</span>"
				ming.innerHTML = div2;
			}
		}
		for(var k = 0; k < res.data.result.length; k++) {
			var minz = res.data.result.sort(function(a, b) {
				return a.grade - b.grade;
			})
			var divl = "<p class='pp'>Time</p><span class='king'>" + res.data.result[0].grade + "</span>";
			tim.innerHTML = divl;
		}

	}
}
getn("王强","10","img/toux.png");
//分享
var shai = document.querySelector(".two_foor_left");
var share = document.querySelector(".share");
var sha = share.querySelector(".sha")
shai.addEventListener("click", function() {
	share.style.transform = "scale(1)";
});
sha.addEventListener("click", function() {
	share.style.transform = "scale(0)";
});
//注册
var register = document.querySelector(".register");
var reg = document.querySelector(".two_foor_right");
reg.addEventListener("click", function() {
	register.style.transform = "rotate(0)";
});
//抽奖
var dianji1 = document.querySelector(".dianji");
var draw = document.querySelector(".draw");
dianji1.addEventListener("click", function() {
	draw.style.transform = "translateX(0)";

});

var beilz = document.querySelector(".beilz");
var bao = draw.querySelectorAll(".baol");
var zailai = document.querySelector(".zailai");
var laici = document.querySelector(".laici");
var jinp =draw.querySelector(".jinp");
var draw_foot = jinp.querySelector(".draw_foot");
beilz.addEventListener("click", function() {
	zailai.style.display="block";
	beilz.style.display="none";
	var num = 0;
	var mo=0;
	var all =["img/icon-1.png","img/icon2.png","img/icon3.png","img/icon5.png","img/icon8.png","img/icon7.png","img/icon6.png","img/icon4.png"];
	var altxt=["奥利帝克户外包","迪卡侬透气T恤","乐扣运动水壶","谢谢参与","迪卡侬运动毛巾","多功能运动腰包","安联运动意外保障计划（7天）","小米运动手环"];
	var imgele =draw_foot.querySelector("img");
	var jinpp=jinp.querySelector("p");
	var tie = setInterval(function() {
		var shijian = Math.floor(Math.random() * 7 +1);
		num++;
		for(var j = 0; j < bao.length; j++) {
			bao[j].classList.remove("act");
		};
		if(num >8) {
			num = 1;
			mo++;
		};
		for (var z=0;z<all.length;z++) {
			imgele.setAttribute("src",all[num-1]);
		}
		for (var i=0;i<altxt.length;i++){
			jinpp.innerText=(altxt[num-1]);
		}
		if(mo>3 && num==shijian){
			clearInterval(tie)
			zailai.style.display="none";
			laici.style.display="block";
			laici.addEventListener("click",function(){
				beilz.style.display="block";
				laici.style.display="none";
			});
			imgele.setAttribute("src",all[num-1]);
			jinpp.innerText=(altxt[num-1]);
		};
		bao[num-1].classList.add("act");
	
	}, 200);
});

//扫码关注
var anneng = document.querySelector(".anneng");
var smaz = document.querySelector(".smgz");
anneng.addEventListener("click", function() {
	smaz.style.transform = "scale(1)";
});